<script lang="ts" setup>
// import { ref } from "vue";
import { useRouter } from "vue-router";
import { RouterEnums } from "@/types";
import { ref, onMounted } from "vue";
import { FiltrationFun } from "@/utils";
// import { useI18n } from "vue-i18n";
// const { locale } = useI18n();
const emits = defineEmits(["openSidebar", "clickTopAdvertise", "openFirstAid", "donwFum"]);
const props = defineProps({
  msgNum: {
    type: Number,
    default: 0, //消息未读数量
  },
  sdmode: {
    type: Number,
    default: 0, //消息未读数量
  },
});
const router = useRouter();
function setSidebar() {
  emits("openSidebar", 1);
  return true;
}
//判断安装过pwa下载的就隐藏，没有的就显示
const topAdvertise = ref(true);
onMounted(() => {
  //判断是否安装过
  const isStandalone =
    window.matchMedia("(display-mode: standalone)").matches ||
    (window.navigator as any).standalone === true;
  topAdvertise.value = isStandalone ? false : true;
  if (FiltrationFun.detectEnvironment() === "pwa" || FiltrationFun.detectEnvironment() === "apk") {
    topAdvertise.value = false;
  }
});
//点击下载pwa和apk包
const promptUser = () => {
  emits("donwFum", 2);
};
</script>
<template>
  <!-- 首页头部APP广告栏 -->
  <div class="home-head-frame">
    <!-- 头部广告位app下载 -->
    <div
      v-if="topAdvertise && props.sdmode == 0"
      class="top-spread-frame df ai-center jc-space-between"
    >
      <div class="left-frame df ai-center">
        <img
          class="close-bai-img"
          src="@/image/new_img/home/Close_bai.png"
          @click="
            () => {
              emits('clickTopAdvertise');
              topAdvertise = false;
            }
          "
        />
        <img class="ome-download-text-img" src="@/image/new_img/home/home_download_text.png" />
      </div>
      <div class="right-frame df ai-center jc-center" @click="promptUser">
        <span>Baixar APP</span>
      </div>
    </div>
    <!-- 网站信息及消息，目录列表，客服 -->
    <div class="app-name-frame df ai-center jc-space-between">
      <div class="directory-frame df ai-center">
        <div class="directory-img-frame df ai-center jc-center">
          <img
            class="directory-img"
            src="@/image/new_img/home/homev2_icon_topleftmenu.png"
            @click="setSidebar"
          />
        </div>

        <img class="website-address" src="@/image/new_img/home/wan_zan_dizi.png" />
      </div>
      <div class="df right-frame">
        <div class="information-frame">
          <img
            class="directory-img-right"
            src="@/image/new_img/home/homev2_icon_topmsg.png"
            @click="router.push(RouterEnums.SYSTEMNOTIFY)"
          />
          <div v-if="props.msgNum > 0" class="information-val">{{ props.msgNum }}</div>
        </div>
        <img
          class="directory-img-right margins-interval"
          src="@/image/new_img/home/homev2_icon_topcs.png"
          @click="
            () => {
              emits('openFirstAid');
            }
          "
        />
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.home-head-frame {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  height: auto;
}

.frame-div {
  width: 100%;
  height: 100%;
  background-image: url(@/image/new_img/main_bg_2.png);
  background-size: cover;
  background-repeat: repeat;
  position: relative;
  left: 0;
  top: 0;

  .top-spread-frame {
    width: 100%;
    background-image: url(@/image/new_img/home/home_download_bg.png);
    background-size: 100% 100%;
    object-fit: cover;
    height: 90.76px;
    .left-frame {
      flex: 1;
      height: 100%;
      .close-bai-img {
        width: 33px;
        height: 33px;
        margin-left: 18px;
        padding: 6px;
        border-radius: 50%;
        background-color: #ffffff40;
      }

      .ome-download-text-img {
        width: auto;
        height: 81.66px;
        margin-left: 14px;
      }
    }
    .right-frame {
      font-size: 24px;
      width: 184px;
      height: 60px;
      background-image: linear-gradient(-70deg, #ffaf00 0%, #ffee00 100%);
      border-radius: 38px;
      user-select: none; /* 禁用文本选择 */
      position: absolute;
      right: 30px;
      top: 16px;
      span {
        user-select: none; /* 禁用文本选择 */
      }
    }
  }
}
.directory-img-frame {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ffffff1a;
  .directory-img {
    width: 40px;
    height: 40px;
    opacity: 0.65;
  }
}

.directory-img-right {
  width: 40px;
  height: 40px;
  padding: 14px;
  border-radius: 50%;
  background-color: #ffffff1a;
}
.app-name-frame {
  width: 100%;
  height: 105px;
  background-image: url(@/image/new_img/main_bg_2.png);
  background-size: cover;
  background-position: 7% 7%;

  .directory-frame {
    margin-left: 29.25px;
    width: auto;
    height: auto;

    .website-address {
      width: auto;
      height: 50px;
      margin-left: 22px;
    }
  }

  .right-frame {
    position: relative;
    top: 0;
    left: 0;
  }
}

.margins-interval {
  margin-left: 29.5px;
  margin-right: 29.25px;
}

.information-frame {
  width: 67px;
  height: 67px;
  position: relative;
  top: 0;
  left: 0;
}

.information-val {
  width: 21px;
  height: 21px;
  background: #ffaf00;
  border-radius: 50%;
  font-size: 14px;
  text-align: center;
  line-height: 21px;
  border: 1px solid white;
  color: #ffffff;
  position: absolute;
  top: 0;
  right: 0;
}
</style>
